<!--查找成员  群主转让-->
<template>
    <div class="findMemberWrap">
        <Head :title="groupTransfer?'群主转让':'选择朋友'" BackType1="1"></Head>
        <div class="content">
            <Search placeholder="搜索"></Search>
            <div class="friends">
                <div class="col" v-for="item in Friends">
                    <p class="firstLetter">
                        {{item.letter}}
                    </p>
                    <div class="firend" v-for="people in item.firends" @click="bindToSendCard">
                        <img src="../assets/img/messageAvatar.png">
                        <p >b比利比里亚</p>
                    </div>
                </div>
                <LetterRight></LetterRight>
            </div>
        </div>
        <Card :show="show" @cancel="cancel" @sendCard="sendCard"></Card>
    </div>
</template>

<script>
    import Head from "../components/Head";
    import Search from "../components/Search";
    import LetterRight from "../components/LetterRight";
    import Card from "../components/Card";
    import { Dialog } from 'vant';

    export default {
        data() {
            return {
                Friends: [
                    {
                        letter:"A",
                        firends:[
                            {
                                name:"b比利比里亚"
                            },
                            {
                                name:"b比利比里亚"
                            },
                            {
                                name:"b比利比里亚"
                            },
                            {
                                name:"b比利比里亚"
                            }
                        ]
                    },
                    {
                        letter:"B",
                        firends:[
                            {
                                name:"b比利比里亚"
                            },
                            {
                                name:"b比利比里亚"
                            },
                            {
                                name:"b比利比里亚"
                            },
                            {
                                name:"b比利比里亚"
                            }
                        ]
                    },
                    {
                        letter:"C",
                        firends:[
                            {
                                name:"b比利比里亚"
                            },
                            {
                                name:"b比利比里亚"
                            },
                            {
                                name:"b比利比里亚"
                            },
                            {
                                name:"b比利比里亚"
                            }
                        ]
                    }


                ],
                show:false,
                groupTransfer : false, //是否为群主转让页面
            }
        },
        components: {
            Head,
            Search,
            LetterRight,
            Card
        },
        methods:{
            cancel(){
                this.show = false
            },
            sendCard(){
                this.show = false

            },
            bindToSendCard(){
                if(this.groupTransfer){
                    Dialog.confirm({
                        title: '群主转让',
                        message: '是否将群主转让给b比利比里亚？'
                    }).then(() => {
                        // on confirm
                    }).catch(() => {
                        // on cancel
                    });
                }else {
                    this.show = true

                }
            }

        }
    }
</script>

<style scoped lang="less">

    .findMemberWrap {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        .content {
            position: absolute;
            top: 88px;
            bottom: 0;
            width: 100%;

            .friends {
                position: absolute;
                top: 90px;
                bottom: 0;
                width: 100%;
                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;
                .col {

                    .firstLetter {
                        display: flex;
                        align-items: center;
                        width: 100%;
                        height: 60px;
                        box-sizing: border-box;
                        padding-left: 25px;
                        background-color: #f2f5f8;
                    }

                    .firend {
                        display: flex;
                        align-items: center;
                        width: 100%;
                        height: 111px;
                        box-sizing: border-box;
                        padding-left: 25px;
                        img {
                            width: 80px;
                            height: 80px;
                            border-radius: 50%;
                            margin-right: 20px;
                        }

                        p {
                            width: 625px;
                            height: 100%;
                            line-height: 111px;
                            border-bottom: 1px solid #E5E5E5;
                            font-size:33px;
                            font-family:PingFangSC-Regular;
                            font-weight:400;
                            color:rgba(50,50,50,1);
                        }
                    }
                }
            }
        }
    }

</style>
